// 全中国过去到今天一段时间内当天的情况
<template>
  <div class="bottomLeft">
    <el-row style="height:100%">
      <el-col style="height: 100%;">
        <!-- 标题 -->
        <el-row style="height:10%">
          <el-col :span="1" :offset="1">
            <span style="color:#5cd9e8">
              <icon name="chart-bar"></icon>
            </span>
          </el-col>

          <el-col :span="10">
              <span class="text mx-2" style="font-size:12px;margin-bottom:5px">中国疫情趋势</span>
          </el-col>

        </el-row>

        <!-- 图表和按钮 -->
        <el-row style="height:90%;">
          <!-- button -->
          <el-col :span="3" :offset="1">
            <el-row style="height:20%;margin-top:20%;">
              <el-col :span="23" >
                <el-button size="mini" type="goon" @click="change_today"  plain>当天情况</el-button>
              </el-col>
            </el-row>
            <el-row style="height:20%;margin-top:32%;">
              <el-col :span="23">
                <el-button size="mini" type="goon" @click="change_total"  plain>累计情况</el-button>
              </el-col>
            </el-row>
            <el-row style="height:20%;margin-top:30%;">
              <el-col :span="23">
                <el-button size="mini" type="goon" @click="change_line"  plain>其他趋势</el-button>
              </el-col>
            </el-row>
          </el-col>

           <!-- 趋势表 -->
          <el-col :span="20" style="height:100%;">
            <bottom-left-today-chart v-if="type == 'today_trend'"></bottom-left-today-chart>
            <bottom-left-total-chart v-else-if="type == 'total_trend'"></bottom-left-total-chart>
            <bottom-left-chart v-else></bottom-left-chart>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import bottomLeftChart from './echarts/bottom/bottomLeftChart'
import bottomLeftTodayChart from './echarts/bottom/bottomLeftTodayChart'
import bottomLeftTotalChart from './echarts/bottom/bottomLeftTotalChart'
export default {
  data () {
    return{
      type: "today_trend"
    }
  },
  components: {
    bottomLeftChart,
    bottomLeftTodayChart,
    bottomLeftTotalChart
  },
  mounted () {

  },
  methods: {
    change_today () {
      this.type = 'today_trend' 
    },
    change_total () {
      this.type = 'total_trend'
    },
    change_line () {
       this.type = 'line'
    }
  }

}
</script>

<style lang="scss" scoped>
.bottomLeft{
  height: 100%;
  width: 100%;
}
.text {
    color: #c3cbde;
}

.el-button--goon {
color: rgb(255, 255, 255);
background-color: #20B2AA;
border-color: #20B2AA;
}
</style>